<template>
  <div class="account-settings-info-view">
        <a-form layout="vertical">
          <a-row :gutter="16">
            <a-col :md="8" :lg="8">
            <a-form-item
              label="$t('settingsLevelDistributionSetting.yjfxczfl')"
            >
              <a-input v-model="data['L1.recharge.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzshfds')" />
            </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.ejfxczfl')"
              >
                <a-input v-model="data['L2.recharge.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzshfds')" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.sjfxczfl')"
              >
                <a-input v-model="data['L3.recharge.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzshfds')" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.yjfxrwfl')"
              >
                <a-input v-model="data['L1.win.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzshfds')" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.ejfxrwfl')"
              >
                <a-input v-model="data['L2.win.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzshfds')" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.sjfxrwfl')"
              >
                <a-input v-model="data['L3.win.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzshfds')" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.yjfxzcjl')"
              >
                <a-input v-model="data['L1.register.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzs')" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.ejfxzcjl')"
              >
                <a-input v-model="data['L2.register.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzs')" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8">
              <a-form-item
                label="$t('settingsLevelDistributionSetting.sjfxzcjl')"
              >
                <a-input v-model="data['L3.register.rebate']" placeholder="$t('settingsLevelDistributionSetting.qsrzs')" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item>
            <a-button :loading="loading" @click="handleClickSave" type="primary">{{ $t('settingsLevelDistributionSetting.bc') }}</a-button>
          </a-form-item>
        </a-form>
  </div>
</template>

<script>

export default {
  components: {
  },
  data () {
    return {
      // cropper
      data: {},
      loading: false
    }
  },
  methods: {
    handleClickSave () {
      this.loading = true
      this.$http.post('/system/save', this.$qs.stringify({
        row: this.$qs.stringify({
          'L1.recharge.rebate': this.data['L1.recharge.rebate'],
          'L2.recharge.rebate': this.data['L2.recharge.rebate'],
          'L3.recharge.rebate': this.data['L3.recharge.rebate'],
          'L1.win.rebate': this.data['L1.win.rebate'],
          'L2.win.rebate': this.data['L2.win.rebate'],
          'L3.win.rebate': this.data['L3.win.rebate'],
          'L1.register.rebate': this.data['L1.register.rebate'],
          'L2.register.rebate': this.data['L2.register.rebate'],
          'L3.register.rebate': this.data['L3.register.rebate']
        })
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('settingsLevelDistributionSetting.cg'),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t('settingsLevelDistributionSetting.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('settingsLevelDistributionSetting.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData () {
      this.$http.get('/system/list').then((res) => {
        this.data = res
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>

  .avatar-upload-wrapper {
    height: 200px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0,0,0,0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      max-width: 180px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
